<template>
	<view class="personal-fans flex-column">
		<!-- #ifndef MP-TOUTIAO -->
		<uni-nav-bar style="z-index:999;" left-icon="left" @clickLeft="goBack" :title="username" :fixed="true"
			:statusBar='!isWin'></uni-nav-bar>
		<!-- #endif -->
		<tab :tabFunc="tabFunc" :datas="tabs"></tab>
		<view class="padding-cross-10 margin-vertical-10">
			<u-search bgColor="#dfdfdf" :showAction="false" placeholder="搜索" v-model="usernameval"></u-search>
		</view>
		<view class="fans flex-column row-gap-10">
			<user-item :showFllower="false" v-show="show" :key="index" :src="transPic(item.infos[0].avatar)"
				v-for="(item, index) in fans" :fullname="item.follower">
				<template #right>
					<u-button color="#dfdfdf" class="custom-style" text="移除"></u-button>
				</template>
			</user-item>
			<view v-show="!show">
				<user-item :showFllower="false" :key="index" :src="transPic(item.infos[1].avatar)"
					v-for="(item, index) in fllowers" :fullname="item.user">
					<template #right>
						<view class="flex padding-cross-10 colum-gap-10">
							<u-button color="#dfdfdf" class="custom-style" :text="fllower"></u-button>
						</view>
					</template>
				</user-item>
			</view>

		</view>
		<drawer>
			<template #header>
				<text>排序方式</text>
			</template>
			<template>
				<view class="flex flex-sb padding-cross-10 margin-vertical-10" @click="fanSort">
					<text>默认</text>
					<radio value="默认" :checked="true"></radio>
				</view>
				<view class="flex flex-sb padding-cross-10 margin-vertical-10" @click="fanSort">
					<text>默认</text>
					<radio value="默认" :checked="false"></radio>
				</view>
				<view class="flex flex-sb padding-cross-10 margin-vertical-10" @click="fanSort">
					<text>默认</text>
					<radio value="默认" :checked="false"></radio>
				</view>
			</template>
		</drawer>
	</view>
</template>

<script>
import Config from "@/common/config.js"
import { getFollower } from "@/api/app/api"
export default {
	data() {
		return {
			tabs: [
				{
					type: "text",
					text: "粉丝",
				},
				{
					type: "text",
					text: "关注"
				}
			],
			username: "",
			usernameval: '',
			show: true,
			fllower: "已关注",
			sort: "默认",
			fans: [],
			fllowers: [],
		}
	},
	methods: {
		goBack() {
			uni.navigateBack({
			})
		},
		changeShow() {
			console.log(this, this.show);
		},
		tabFunc(index) {
			index == 0 ? this.show = true : this.show = false;
			if (index == 1) {
				if (this.fllowers.length === 0) {
					getFollower({
						username: this.username,
						page: 1,
						isFan: false
					}).then(res => {
						console.log(res)
						this.fllowers.push(...res.data)
					}).catch(err => {
						console.log(err)
					})
				}
			}
		},
		transPic(val) {
			if (typeof val === 'string' && val.includes('cloud://')) {
				return val;
			}
			if (val === undefined) {
				val = 'HeadPortrait.jpg'
			}
			return Config.cloud_url + val;
		},
		changeSort() {
			this.$store.commit('setMask', true)
		},
		fanSort() {
			console.log(11111);
		}
	},
	computed: {
		optionIcon() {
			return this.$store.getters?.optionIcon ?? "";
		},
	},
	onLoad(options) {
		let username = this.username = options.username;
		this.tabs[0].text += `(${options.fllower})`;
		this.tabs[1].text += `(${options.fans})`;
		getFollower({
			username: this.username,
			page: 1,
			isFan: true
		}).then(res => {
			console.log(res)
			this.fans.push(...res.data)
		}).catch(err => {
			console.log(err)
		})
	}
}
</script>

<style lang="scss" scoped>
.personal-fans {}

.custom-style {
	width: 100rpx;
	background-color: gray;
	color: #c3c3c3;
}

.personal-fans ::v-deep .u-button__text {
	color: #000000;
	font-weight: 700;
}
</style>